<template>
  <view class='container'>
    <view class='submit-order'>
      <!-- 收货地址 -->
      <view class='delivery-addr ' @click='toAddrListPage'>
        <view class='addr-bg ' v-if="!userAddr">
          <view class='add-addr'>
            <view class='plus-sign-img'>
              <image src='../../static/icon/plus-sign.png' lazy-load></image>
            </view>
            <text>新增收货地址</text>
          </view>
          <view class='arrow empty'></view>
        </view>
        <view class='addr-bg whole' v-if="userAddr">
          <view class='addr-icon'>
            <image src='../../static/icon/addr.png' lazy-load></image>
          </view>
          <view class='user-info'>
            <text class='item'>{{ userAddr.receiver }}</text>
            <text class='item'>{{ userAddr.mobile }}</text>
          </view>
          <view class='addr'>
            {{ userAddr.province }}{{ userAddr.city }}{{ userAddr.area }}{{ userAddr.addr }}
          </view>
          <view class='arrow'></view>
        </view>
      </view>

      <!-- 商品详情 -->
      <view class='prod-item'>
        <block v-for="(item, index) in orderItems" :key='index'>
          <view class='item-cont' @click='toOrderDetailPage($event)' :data-ordernum="item.primaryOrderNo">
            <view class='prod-pic'>
              <image :src='item.pic' lazy-load></image>
            </view>
            <view class='prod-info'>
              <view class='prodname'>
                {{ item.prodName }}
              </view>
              <view class='prod-info-cont'>{{ item.skuName }}</view>
              <view class='price-nums'>
                <text class='prodprice'><text class='symbol'>￥</text>
                  <text class='big-num'>{{ parsePrice(item.price)[0] }}</text>
                  <text class='small-num'>.{{ parsePrice(item.price)[1] }}</text></text>
                <text class="prodcount">x{{ item.prodCount }}</text>
              </view>
            </view>
          </view>
        </block>
        <view class='total-num'>
          <text class="prodcount">共{{ totalCount }}件商品</text>
          <view class='prodprice'>合计：
            <text class='symbol'>￥</text>
            <text class='big-num'>{{ parsePrice(total)[0] }}</text>
            <text class='small-num'>.{{ parsePrice(total)[1] }}</text>
          </view>
        </view>
      </view>

      <!-- 订单详情 -->
      <view class='order-msg'>
        <view class='msg-item'>
          <view class='item coupon' @click='showCouponPopup'>
            <text class='item-tit'>优惠券：</text>
            <text class='item-txt' v-if="!coupons.canUseCoupons">暂无可用</text>
            <text class='coupon-btn'>{{ coupons.totalLength ? coupons.totalLength : 0 }}张</text>
            <text class='arrow'></text>
          </view>
          <view class='item'>
            <text>买家留言：</text>
            <input :value='remarks' placeholder='给卖家留言' @click="onRemarksInput" />
          </view>
        </view>

      </view>

      <view class='order-msg'>
        <view class='msg-item'>
          <view class='item'>
            <view class='item-tit'>订单总额：</view>
            <view class='item-txt price'>
              <text class='symbol'>￥</text>
              <text class='big-num'>{{ parsePrice(total)[0] }}</text>
              <text class='small-num'>.{{ parsePrice(total)[1] }}</text>
            </view>
          </view>
          <view class='item'>
            <view class='item-tit'>运费：</view>
            <view class='item-txt price'>
              <text class='symbol'>￥</text>
              <text class='big-num'>{{ parsePrice(transfee)[0] }}</text>
              <text class='small-num'>.{{ parsePrice(transfee)[1] }}</text>
            </view>
          </view>
          <view class='item'>
            <view class='item-tit'>优惠金额：</view>
            <view class='item-txt price'>
              <text class='symbol'>-￥</text>
              <text class='big-num'>{{ parsePrice(shopReduce)[0] }}</text>
              <text class='small-num'>.{{ parsePrice(shopReduce)[1] }}</text>
            </view>
          </view>
          <view class='item payment'>
            <view class='item-txt price'>
              小计：
              <text class='symbol'>￥</text>
              <text class='big-num'>{{ parsePrice(actualTotal)[0] }}</text>
              <text class='small-num'>.{{ parsePrice(actualTotal)[1] }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>


    <!-- 底部栏 -->
    <view class='submit-order-footer'>
      <view class='sub-order'>
        <view class='item-txt'>
          合计：
          <view class='price'>
            <text class='symbol'>￥</text>
            <text class='big-num'>{{ parsePrice(actualTotal)[0] }}</text>
            <text class='small-num'>.{{ parsePrice(actualTotal)[1] }}</text>
          </view>
        </view>
      </view>
      <view class='footer-box' @click='toPay'>
        提交订单
      </view>
    </view>
    <!-- 选择优惠券弹窗 -->
    <view class="popup-hide" v-if="popupShow">
      <view class="popup-box">
        <view class="popup-tit">
          <text>优惠券</text>
          <text class="close" @click='closePopup'></text>
        </view>
        <view class="coupon-tabs">
          <view class="coupon-tab" :class="couponSts == 1 ? 'on' : ''" @click='changeCouponSts' data-sts='1'>
            可用优惠券({{ coupons.canUseCoupons.length ? coupons.canUseCoupons.length : 0 }})</view>
          <view class="coupon-tab" :class="couponSts == 2 ? 'on' : ''" @click='changeCouponSts' data-sts='2'>
            不可用优惠券({{ coupons.unCanUseCoupons.length ? coupons.unCanUseCoupons.length : 0 }})</view>
        </view>
        <view class='popup-cnt'>
          <view v-if="couponSts == 1">
            <block v-for="(item, index) in coupons.canUseCoupons" :key="index">
              <coupon :item="item" :order="true" @checkCoupon="checkCoupon" :canUse="true"></coupon>
            </block>
          </view>
          <view v-if="couponSts == 2">
            <block v-for="(item, index) in coupons.unCanUseCoupons" :key="index">
              <coupon :item="item" :order="true" :canUse="false"></coupon>
            </block>
          </view>
          <view class="botm-empty"></view>
        </view>
        <view class="coupon-ok" v-if="couponSts == 1">
          <text @click='choosedCoupon'>确定</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request, getCartCount } from "../../utils/http";
import {
  parseDiscount,
  parsePrice,
  toPrice,
  parseDiscountMsg
} from "../../wxs/numbers";
export default {
  data() {
    return {
      popupShow: false,
      couponSts: 1,
      couponList: [],
      // 订单入口 0购物车 1立即购买
      orderEntry: "0",
      userAddr: null,
      orderItems: [],
      coupon: {
        totalLength: 0,
        canUseCoupons: [],
        noCanUseCoupons: []
      },
      actualTotal: 0,
      total: 0,
      totalCount: 0,
      transfee: 0,
      reduceAmount: 0,
      remark: "",
      couponIds: [],
      shopReduce: null
    }
  },
  onLoad: function (options) {
    this.orderEntry = options.orderEntry;
  },
  onShow: function () {
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1];
    console.log(currPage.data.selAddress, "22222222")
    if (currPage.data.selAddress == "yes") {
      this.userAddr = currPage.data.item;
    }
    //获取订单数据
    this.loadOrderData();
  },
  methods: {
    parseDiscount,
    parseDiscountMsg,
    toPrice,
    parsePrice,
    //加载订单数据
    loadOrderData: function () {
      var addrId = 0;
      if (this.userAddr != null) {
        addrId = this.userAddr.addrId;
      }
      uni.showLoading({
        mask: true
      });
      var params = {
        url: "/p/order/confirm",
        method: "POST",
        data: {
          addrId: addrId,
          orderItem: this.orderEntry === "1" ? JSON.parse(uni.getStorageSync("orderItem")) : undefined,
          basketIds: this.orderEntry === "0" ? JSON.parse(uni.getStorageSync("basketIds")) : undefined,
          couponIds: this.couponIds,
          userChangeCoupon: 1
        },
        callBack: res => {
          uni.hideLoading();
          let orderItems = [];

          res.shopCartOrders[0].shopCartItemDiscounts.forEach(itemDiscount => {
            orderItems = orderItems.concat(itemDiscount.shopCartItems)
          })
          if (res.shopCartOrders[0].coupons) {
            let canUseCoupons = []
            let unCanUseCoupons = []
            res.shopCartOrders[0].coupons.forEach(coupon => {
              if (coupon.canUse) {
                canUseCoupons.push(coupon)
              } else {
                unCanUseCoupons.push(coupon)
              }
            })
            this.coupons = {
              totalLength: res.shopCartOrders[0].coupons.length,
              canUseCoupons: canUseCoupons,
              unCanUseCoupons: unCanUseCoupons
            }
          }
          this.orderItems = orderItems;
          this.actualTotal = res.actualTotal;
          this.total = res.total;
          this.totalCount = res.totalCount;
          this.userAddr = res.userAddr;
          this.transfee = res.shopCartOrders[0].transfee;
          this.shopReduce = res.shopCartOrders[0].shopReduce;
        },
        errCallBack: res => {
          uni.hideLoading();
          this.chooseCouponErrHandle(res)
        }
      };
      request(params);
    },
    /**
   * 优惠券选择出错处理方法
   */
    chooseCouponErrHandle(res) {
      // 优惠券不能共用处理方法
      if (res.statusCode == 601) {
        uni.showToast({
          title: res.data,
          icon: "none",
          duration: 3000,
          success: res => {
            this.couponIds = [];
          }
        })
        setTimeout(() => {
          this.loadOrderData();
        }, 2500)
      }
    },
    onRemarksInput: function (e) {
      this.remarks = e.detail.value;
    },
    /**
   * 提交订单
   */
    toPay: function () {
      if (!this.userAddr) {
        uni.showToast({
          title: '请选择地址',
          icon: "none"
        })
        return;
      }

      this.submitOrder();
    },
    submitOrder: function () {
      uni.showLoading({
        mask: true
      });
      var params = {
        url: "/p/order/submit",
        method: "POST",
        data: {
          orderShopParam: [{
            remarks: this.remark,
            shopId: 1
          }]
        },
        callBack: res => {
          uni.hideLoading();
          console.log(res);
          this.calWeixinPay(res.orderNumbers);
          getCartCount();
        }
      };
      request(params);
    },
    /**
   * 唤起微信支付
   */
    calWeixinPay: function (orderNumbers) {
      uni.showLoading({
        mask: true
      });
      var params = {
        url: "/p/order/pay",
        method: "POST",
        data: {
          payType: 1,
          orderNumbers: orderNumbers
        },
        callBack: function (res) {
          uni.hideLoading();
          uni.requestPayment({
            timeStamp: res.timeStamp,
            nonceStr: res.nonceStr,
            package: res.packageValue,
            signType: res.signType,
            paySign: res.paySign,
            success: e => {
              // console.log("支付成功");
              uni.navigateTo({
                url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + orderNumbers + "&orderType=" + this.orderType,
              })
            },
            fail: err => {
              uni.navigateTo({
                url: '/pages/pay-result/pay-result?sts=0&orderNumbers=' + orderNumbers + "&orderType=" + this.orderType,
              })
            }
          })

        }
      };
      request(params);
    },
    changeCouponSts: function (e) {
      this.couponSts = e.currentTarget.dataset.sts;
    },
    showCouponPopup: function () {
      this.popupShow = true;
    },
    closePopup: function () {
      this.popupShow = false;
    },
    /**
   * 去地址页面
   */
    toAddrListPage: function () {
      console.log(1);
      uni.navigateTo({
        url: '/pages/delivery-address/delivery-address?order=0',
      })
    },
    /**
   * 确定选择好的优惠券
   */
    choosedCoupon: function () {
      this.loadOrderData();
      this.popupShow = false;
    },
    /**
   * 优惠券子组件发过来
   */
    checkCoupon: function (e) {
      let index = ths.couponIds.indexOf(e.detail.couponId);
      if (index === -1) {
        this.couponIds.push(e.detail.couponId)
      } else {
        this.couponIds.splice(index, 1)
      }
    },
    toOrderDetailPage(e) {
      console.log(e);
    }
  }
}
</script>

<style lang="scss" scoped>
/* pages/submit-order/submit-order.uniss */

page {
  background: #f4f4f4;
}

/* 收货地址 */

.submit-order {
  margin-bottom: 100rpx;
}

.submit-order .delivery-addr {
  position: relative;
  background: #fff;
}

.delivery-addr .addr-bg .add-addr .plus-sign {
  color: #eb2444;
  border: 2rpx solid #eb2444;
  padding: 0rpx 6rpx;
  margin-right: 10rpx;
}

.delivery-addr .addr-bg {
  padding: 0 30rpx;
}

.delivery-addr .addr-bg.whole {
  padding: 0 39rpx 0 77rpx;
}

.delivery-addr .addr-bg .add-addr {
  font-size: 28rpx;
  color: #666;
  display: flex;
  align-items: center;
  padding: 30rpx 0;
}

.submit-order .delivery-addr .addr-icon {
  width: 32rpx;
  height: 32rpx;
  display: block;
  position: absolute;
  left: 30rpx;
  top: 24rpx;
}

.submit-order .delivery-addr .addr-icon image {
  width: 100%;
  height: 100%;
}

.submit-order .delivery-addr .user-info {
  padding-top: 20rpx;
  line-height: 48rpx;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.submit-order .delivery-addr .user-info .item {
  font-size: 30rpx;
  margin-right: 30rpx;
  vertical-align: top;
  display: inline-block;
}

.submit-order .delivery-addr .addr {
  font-size: 26rpx;
  line-height: 36rpx;
  color: #999;
  width: 90%;
  padding-bottom: 20rpx;
  margin-top: 15rpx;
}

.submit-order .delivery-addr .arrow {
  width: 15rpx;
  height: 15rpx;
  border-top: 2rpx solid #777;
  border-right: 2rpx solid #777;
  transform: rotate(45deg);
  position: absolute;
  right: 30rpx;
  top: 60rpx;
}

.submit-order .delivery-addr .arrow.empty {
  top: 39rpx;
}

.addr-bg .add-addr .plus-sign-img {
  width: 32rpx;
  height: 32rpx;
  font-size: 0;
  margin-right: 10rpx;
}

.addr-bg .add-addr .plus-sign-img image {
  width: 100%;
  height: 100%;
}

/* 商品列表 */

.prod-item {
  background-color: #fff;
  margin-top: 15rpx;
  font-size: 28rpx;
}

.prod-item .item-cont .prod-pic image {
  width: 180rpx;
  height: 180rpx;
}

.prod-item .order-num {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
}

.order-state {
  display: flex;
  align-items: center;
}

.prod-item .item-cont {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f1f1f1;
}

.prod-item .order-num .clear-btn {
  width: 32rpx;
  height: 32rpx;
  font-size: 0;
  vertical-align: top;
  margin-top: 6rpx;
  margin-left: 42rpx;
  position: relative;
}

.prod-item .order-num .clear-btn::after {
  content: " ";
  display: block;
  position: absolute;
  left: -10px;
  top: 1px;
  width: 1px;
  height: 12px;
  background: #ddd;
}

.prod-item .order-num .clear-btn .clear-list-btn {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.prod-item .item-cont .prod-pic {
  font-size: 0;
  display: block;
  width: 160rpx;
  height: 160rpx;
  overflow: hidden;
  background: #fff;
  margin-right: 16rpx;
}

.prod-item .item-cont .prod-pic image {
  width: 100%;
  height: 100%;
}

.prod-item .item-cont .prod-info {
  margin-left: 10rpx;
  font-size: 28rpx;
  width: 100%;
  position: relative;
  height: 160rpx;
  -webkit-flex: 1;
  -ms-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  flex: 1;
}

.prod-item .item-cont .prod-info .prodname {
  font-size: 28rpx;
  line-height: 40rpx;
  max-height: 86rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;
}

.prod-item .item-cont .prod-info .prod-info-cont {
  color: #999;
  line-height: 40rpx;
  margin-top: 10rpx;
  font-size: 22rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;
}

.prod-item .total-num {
  text-align: right;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
}

.prod-item .price-nums .prodprice {
  position: absolute;
  bottom: 0;
}

.prod-item .price-nums .prodcount {
  position: absolute;
  bottom: 5rpx;
  right: 0;
  color: #999;
  font-family: verdana;
}

.prod-item .total-num .prodprice {
  display: inline-block;
  color: #333;
}

.prod-item .total-num .prodcount {
  margin-right: 20rpx;
}

/* 
订单信息 */

.order-msg {
  background: #fff;
  margin-top: 15rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

.order-msg .msg-item {
  border-top: 2rpx solid #f1f1f1;
}

.order-msg .msg-item:first-child {
  border: 0;
}

.order-msg .msg-item .item {
  position: relative;
  display: flex;
  padding: 16rpx 0;
  align-items: center;
}

.order-msg .msg-item .item.payment {
  border-top: 2rpx solid #f1f1f1;
  color: #eb2444;
}

.order-msg .msg-item .item .item-tit {
  line-height: 48rpx;
}

.order-msg .msg-item .item .item-txt {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  flex: 1;
  font-family: arial;
  max-height: 48rpx;
  overflow: hidden;
  line-height: 48rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;
}

.order-msg .msg-item .item.coupon {
  border-bottom: 2rpx solid #e1e1e1;
}

.order-msg .msg-item .item input {
  flex: 1;
}

.order-msg .msg-item .item .coupon-btn {
  display: block;
  margin: 0 30rpx;
  line-height: 28rpx;
  color: #999;
}

.order-msg .msg-item .item .item-txt.price {
  text-align: right;
}

.order-msg .msg-item .item .arrow {
  width: 15rpx;
  height: 15rpx;
  border-top: 2rpx solid #999;
  border-right: 2rpx solid #999;
  transform: rotate(45deg);
  position: absolute;
  right: 0rpx;
}

/* 底部栏 */

.submit-order-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 750rpx;
  background: #fff;
  margin: auto;
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 26rpx;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

.submit-order-footer .sub-order {
  flex: 1;
  margin: 0 30rpx;
  line-height: 100rpx;
  display: block;
  text-align: left;
  font-size: 28rpx;
}

.submit-order-footer .footer-box {
  padding: 0 10rpx;
  width: 200rpx;
  background: #eb2444;
  text-align: center;
  line-height: 100rpx;
  color: #fff;
}

.submit-order-footer .sub-order .item-txt .price {
  display: inline;
  color: #eb2444;
  font-size: 28rpx;
}

.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}

/** 优惠券弹窗 **/

.popup-hide {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.3);
}

.popup-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80%;
  overflow: hidden;
  background-color: #fff;
}

.popup-tit {
  position: relative;
  height: 46px;
  line-height: 46px;
  padding-left: 10px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

.close {
  color: #aaa;
  border-radius: 12px;
  line-height: 20px;
  text-align: center;
  height: 20px;
  width: 20px;
  font-size: 18px;
  padding: 1px;
  top: 10px;
  right: 10px;
  position: absolute;
}

.close::before {
  content: "\2716";
}

.coupon-tabs {
  display: flex;
  font-size: 14px;
  justify-content: space-around;
  border-bottom: 1px solid #f2f2f2;
}

.coupon-tab {
  padding: 10px 0;
}

.coupon-tab.on {
  border-bottom: 2px solid #eb2444;
  font-weight: 600;
}

.popup-cnt {
  height: calc(100% - 88px);
  overflow: auto;
  padding: 0 10px;
  background: #f4f4f4;
}

.coupon-ok {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 50px;
  font-size: 14px;
  text-align: center;
  box-shadow: 0px -1px 1px #ddd;
  background: rgba(255, 255, 255, 0.9);
}

.coupon-ok text {
  border-radius: 20px;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  width: 450rpx;
  padding: 7px;
  background: -o-linear-gradient(right, #f45c43, #eb2444);
  background: linear-gradient(right, #f45c43, #eb2444);
  background: -webkit-linear-gradient(right, #f45c43, #eb2444);
  color: #fff;
  box-shadow: -1px 3px 3px #aaa;
}

.botm-empty {
  height: 60px;
}

/*checkbox 选项框大小  */

checkbox .wx-checkbox-input {
  border-radius: 50%;
  width: 35rpx;
  height: 35rpx;
}

/*checkbox选中后样式  */

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #eb2444;
  border-color: #eb2444;
}

/*checkbox选中后图标样式  */

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}
</style>